<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { createImageViewer } from '@/components/ImageViewer'

const { t } = useI18n()

defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => undefined
  }
})

const openPreview = (urlList: string[], initialIndex: number) => {
  createImageViewer({
    urlList,
    initialIndex,
    zIndex: 9999
  })
}

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'feedbackNo',
    label: t('feedback.feedbackNo')
  },
  {
    field: 'createTime',
    label: t('feedback.feedbackTime')
  },
  {
    field: 'contacts',
    label: t('feedback.contacts')
  },
  {
    field: 'mobile',
    label: t('feedback.mobile')
  },
  {
    field: 'content',
    label: t('feedback.content'),
    span: 24
  },
  {
    field: 'imgs',
    label: t('feedback.images'),
    span: 24,
    slots: {
      default: (data: any) => {
        const imgs = data.imgs
          .split(',')
          .map((it: string, i: number, arr: string[]) => (
            <img
              width={60}
              height={60}
              src={it}
              class={'mr-1'}
              onClick={() => openPreview(arr, i)}
            />
          ))
        return (
          <>
            <div class={'overflow-auto'}>{imgs}</div>
          </>
        )
      }
    }
  }
])
</script>

<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
</template>
